<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ASouthernCat's Web Page</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" href="./src/assets/css/style.css" />
  </head>
  <body>
    <section class="showcase">
      <header>
        <h2 class="logo">ASOUTHERNCAT</h2>
        <figure class="audio">
          <figcaption>一路向北-周杰伦</figcaption>
          <audio
            src="./src/assets/music/周杰伦 - .一路向北.mp3"
            controls=""
            autoplay=""
          ></audio>
        </figure>
        <div class="translatetoggle">
          <button type="button" class="translate" id="translate" value="en">
            En/中
          </button>
          <div class="toggle"></div>
        </div>
      </header>
      <!--背景图轮播-->
      <div class="bgimg-show-container">
        <!-- 创建图片存储容器 -->
        <div class="bgimg-container">
          <img
            class="backgroundimg"
            src="./src/assets/img/xiaohei.jpg"
            alt="backgroundimg"
          />
          <img
            class="backgroundimg"
            src="./src/assets/img/bgimg2.png"
            alt="backgroundimg"
          />
        </div>
      </div>

      <div class="overlayforimg" id="overlayforimg"></div>
      <div class="model_container">
        <div class="text_content model_content">
          <div class="text">
            <h2 i18n="phrase1">Bring Up</h2>
            <h3 i18n="phrase2">the Good Times</h3>
            <p i18n="saying">
              Don't lose heart when you meet with difficulties in the course of
              carrying out the plan.
            </p>
            <a href="./src/assets/html/exploreMars.html" i18n="explore"
              >Explore Web3D</a
            >
          </div>
          <div class="model">
            <iframe
              id="landing-model"
              title="A 3D model of a shoe"
              class="hero__iframe"
              width="auto"
              height="auto"
              src="https://sketchfab.com/models/99bfe75ebd734fa3832a63e02e2cacf7/embed?annotations_visible=0&amp;autospin=-0.1&amp;autostart=1&amp;camera=0&amp;double_click=0&amp;internal=1&amp;max_texture_size=1024&amp;orbit_constraint_pan=1&amp;orbit_constraint_zoom_in=40&amp;orbit_constraint_zoom_out=60&amp;preload=1&amp;scrollwheel=0&amp;sound_enable=0&amp;transparent=1&amp;ui_animations=0&amp;ui_annotations=0&amp;ui_ar=0&amp;ui_ar_help=0&amp;ui_color=white&amp;ui_fadeout=0&amp;ui_fullscreen=1&amp;ui_help=0&amp;ui_infos=0&amp;ui_inspector=0&amp;ui_settings=0&amp;ui_stop=0&amp;ui_theatre=0&amp;ui_theme=dark&amp;ui_vr=0&amp;ui_watermark=0"
              frameborder="0"
              allow="autoplay; fullscreen; xr-spatial-tracking"
              allowfullscreen=""
              mozallowfullscreen="true"
              webkitallowfullscreen="true"
              xr-spatial-tracking="true"
              execution-while-out-of-viewport="true"
              execution-while-not-rendered="true"
              web-share="true"
            ></iframe>
          </div>
        </div>
      </div>
      <ul class="social">
        <div class="socialli">
          <li>
            <a href="https://github.com/ASouthernCat/" target="_blank"
              ><img src="src/assets/img/github.png" alt="qq"
            /></a>
          </li>
          <li>
            <a href="https://gitee.com/asoutherncat/" target="_blank"
              ><img src="src/assets/img/gitee.png" alt="email"
            /></a>
          </li>
          <li>
            <a href="https://b23.tv/l01aAiH" target="_blank"
              ><img src="src/assets/img/bilibili.png" alt="wechat"
            /></a>
          </li>
        </div>

        <div class="clickblank" id="clickblank">
          <a class="breath" id="clickblank" i18n="clickblank" href="#">
            Click here or the menu button to view more.
          </a>
        </div>
      </ul>
    </section>

    <div class="menu">
      <ul>
        <li><a href="https://asoutherncat.gitee.io/responsive-portfolio-website/" i18n="menu.home" target="_blank">Home</a></li>
        <li><a href="#" i18n="menu.photo" onclick="dialog()">Photo</a></li>
        <li>
          <a href="#" i18n="menu.repository" onclick="dialog()">Repository</a>
        </li>
        <li><a href="#" i18n="menu.blog" onclick="dialog()">Blog</a></li>
        <li>
          <div class="contact" i18n="menu.contact">
            Contact Me:*****@163.com
          </div>
        </li>
      </ul>
    </div>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="dep/jquery.i18n.min.js"></script>
    <script src="src/assets/js/cn-en-translate.js"></script>
    <script src="src/assets/js/script.js"></script>
  </body>
</html>
